<template>
  <!-- 面包屑导航区 -->
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>商品管理</el-breadcrumb-item>
    <el-breadcrumb-item>商品分类</el-breadcrumb-item>
  </el-breadcrumb>

  <!-- 视图区域 -->
  <el-card>
    <el-row>
      <el-col :span="8">
        <!-- 搜索文本输入框 -->
        <el-input placeholder="请输入搜索">
          <template #append>
            <el-button icon="el-icon-search"></el-button>
          </template>
        </el-input>
      </el-col>
      <!--  -->
      <el-col :span="4">
         <el-button type="primary" style="margin: 0 10px;">添加商品</el-button>
       </el-col>
    </el-row>
  </el-card>
</template>

<script>
import { reactive, ref } from "vue";
import {getGoodsList} from "@/network/Goods"
export default {
  setup(params, context) {
    const data = reactive({
      queryInfo: {
        query: "",//搜索关键字
        pagenume: 1,
        pagesize: 10,
      }
    });

    const methods = reactive({
      async getGoodsList(){
        const {res: data} = await getGoodsList(data.queryInfo);
        if(res.status != 200)
        {
          console.log("获取列表失败")
          context.$message.error("获取商品列表失败")
        }
      }
    });

    methods.getGoodsList();
    
    return {
      data,
      methods,
    };
  },
};
</script>

<style lang="less" scoped></style>
